<template>
  <div id="chat">
    <div class="sidebar">
      <mycard></mycard>
    </div>
    <div class="main">
      <div class="content">
        <div class="friend-wrapper">
          <search></search>
          <div class="friendlist">
            <ul>
              <li v-for="item in friendList" class="frienditem"  :class="{ noborder: !item.initial}" :key="item.id">
                  <div class="list_title" v-if="item.initial">{{item.initial}}</div>
                  <div class="friend-info active" @click="toChat(item)">
                      <img class="avatar"  width="36" height="36" :src="item.avatar">
                      <div class="remark">{{item.nickname}}</div>
                  </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="friendinfo">
          <info></info>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import search from '../../components/search/search'
import info from '../../components/info/info'
import mycard from '../../components/mycard/mycard'
export default{
    components: {
        search,
        info,
        mycard
    },
    data() {
      return {
          friendList: []
      }
    },
    created() {
      this.$EventBus.$emit('Send', {id: 2})
      const _this = this
      this.$EventBus.$on('ID' + 0x102, (userList) => {
        let users = userList.users;
        _this.getFriendList(users)
        localStorage.setItem('friendList', JSON.stringify(this.friendList))
      })
    },
    methods: {
      getFriendList(items) {
        if (items != undefined && items != null) {
          this.friendList = []
          for (let index = 0; index < items.length; index++) {
            const element = items[index];
            this.friendList.push(element);
          }
        }
      },
      toChat(item) {
        // 没有则添加
        let chatList = JSON.parse(localStorage.getItem('chatList'))
        let search = false
        if (chatList == null) {
            chatList = []
        } else {
            for(let i=0; i<chatList.length; i++) {
                if (item.id == chatList[i].id) {
                    search = true
                    break
                }
            }
        }
        if (!search) {
            chatList.push({id: item.id, nickname: item.nickname, avatar: item.avatar, lastMessage: null, index: 1, lastDate: null})
        }
        localStorage.setItem('chatList', JSON.stringify(chatList))

        this.$router.push({
          path: `/chat`,
          query: {id: item.id}
        })
      }
    }
}
</script>

<style lang="stylus" scoped>
#chat
  display: flex
  border-radius 50px
  margin: 20px auto
  width: 860px
  height: 600px
  background-color: #fff
  .sidebar
    width: 60px
    height: 600px
    background: #2b2c2f
  .main
    flex: 1
    height: 600px
    background: #f2f2f2
.content
  display: flex
  width: 800px
  .friend-wrapper
    width: 250px
    background: rgb(230,230,230)
  .friendinfo
    flex: 1
.friendlist
    height: 540px
    overflow-y: auto
    .frienditem
        border-top: 1px solid #dadada
        &:first-child,&.noborder
            border-top: none
        .list_title
            box-sizing: border-box
            width: 100%
            font-size: 12px
            padding: 15px 0 3px 12px
            color: #999
        .friend-info
            display: flex
            padding: 12px
            transition: background-color .1s
            font-size: 0
            &:hover
                background-color: rgb(220,220,220)
            &.active
                background-color: #c4c4c4
            .avatar
                border-radius: 2px
                margin-right: 12px
            .remark
                font-size: 14px
                line-height: 36px

</style>
